<template>
  <div>
    <div class="centerdiv">
      <div class="topbox">
        <div
          @click="setactivenavbox('navboxone')"
          :class="{ activenavbox: isactivenavbox === 'navboxone' }"
          class="navboxone"
        >
          试卷评分
        </div>
        <div
          @click="setactivenavbox('navboxtwo')"
          :class="{ activenavbox: isactivenavbox === 'navboxtwo' }"
          class="navboxtwo"
        >
          答案解析
        </div>
      </div>

      <div class="centerbox_right" v-show="isactivenavbox === 'navboxone'">
        <div style="display: flex">
          <div class="fenxiboxone">
            <div class="minmibox">
              <span>试卷名</span>
              <p>{{ testRecord.testPaperName }}</p>
            </div>
            <div class="minmibox">
              <span>总分</span>
              <p>{{ testRecord.testPaperScore }}</p>
            </div>
            <div class="minmibox">
              <span>得分</span>
              <p>{{ testRecord.userScore }}</p>
            </div>
            <div class="minmibox">
              <span>题目</span>
              <p>{{ testRecord.testPaperQuestionNum }}</p>
            </div>

            <div class="minmibox">
              <span>难度</span>
              <p>一星</p>
            </div>
            <div class="minmibox">
              <span>用时</span>
              <p>{{ testRecord.spendTime }}</p>
            </div>
          </div>

          <div class="fenxiboxtwo">
            <h4>知识点分布</h4>
            <div id="main"></div>
          </div>
        </div>
        <div class="bottombox">
          <button @click="routerpushexerciseone" class="zailaiyizubtn">
            再来一组
          </button>
          <button @click="routerpushexercise" class="lainxiqitabtn">
            练习其他技能
          </button>
        </div>
      </div>
      <div class="centerbox_left" v-show="isactivenavbox === 'navboxtwo'">
        <div class="single">
          <div class="header">
            <div class="option" v-if="testRecordList.questions.length > 0">
              <div class="dx">题目</div>
              <div
                class="box"
                v-for="(item, inx) in testRecordList.questions"
                @click="ChangeItem(item, inx)"
                :class="{ box2: index === inx,box3:item.result==1 }"
                :key="inx"
              >
                {{ inx + 1 }}
              </div>
              <!-- <div class="box ">2</div> -->
            </div>
          </div>
          <div
            class="question"
            style="margin-top: 20px"
            v-if="testRecordList.questions.length > 0"
          >
            <h4 style="margin-bottom: 20px">
              {{ `${index + 1}:`
              }}{{ testRecordList.questions[index].question.name }}
            </h4>
            <div
              v-html="
                `${md(
                  testRecordList.questions.length > 0
                    ? testRecordList.questions[index].question.content
                    : ''
                )}`
              "
            ></div>
            <div
              v-if="
                testRecordList.questions[index].question.name == '单选题' ||
                testRecordList.questions[index].question.name == '多选题'
              "
            >
              <div
                label="1"
                :key="index"
                v-for="(Item, index) in testRecordList.questions[index].question
                  .optionsList"
                class="main"
              >
                <div>{{ letter[index] }}:</div>
                <div v-html="`${md(Item.content)}`"></div>

                <!-- <div v-html="`${md(Item.id)}`"></div>
								<div v-html="`${md(Item.content)}`"></div> -->
              </div>
            </div>

            <ul style="margin-top: 1.25rem">
              <div
                v-if="testRecordList.questions[index].question.name == '判断题'"
              >
                <li>
                  正确答案：{{
                    testRecordList.questions[index].question.answer == 1
                      ? "正确"
                      : "错误"
                  }}
                </li>
                <li>
                  用户答案：{{
                    testRecordList.questions[index].userAnswer == 1
                      ? "正确"
                      : "错误"
                  }}
                </li>
              </div>
              <div
                v-if="
                  testRecordList.questions[index].question.name == '单选题' ||
                  testRecordList.questions[index].question.name == '多选题'
                "
              >
                <li>正确答案：{{ answer }}</li>
                <li>用户答案：{{ userAnswer }}</li>
              </div>
              <li>
                结果：
                <el-tag
                  type="success"
                  v-if="testRecordList.questions[index].result == 1"
                  >正确</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="testRecordList.questions[index].result == 0"
                  >错误</el-tag
                >
              </li>
              <li>
                得分：{{
                  testRecordList.questions[index].result == 1
                    ? testRecordList.questions[index].question.score
                    : 0
                }}
              </li>
              <li>
                难度：<el-rate
                  v-model="testRecordList.questions[index].question.difficulty"
                  :max="5"
                  disabled
                >
                </el-rate>
              </li>
              <li>
                解析：{{ testRecordList.questions[index].question.parsing }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import marked from "marked";
import * as echarts from "echarts";
import { HttpManager } from "../../request/Special.js";
export default {
  name: "exercisetwo",
  data() {
    return {
      isactivenavbox: "navboxone",
      jishiqi: "",
      tGoucheng: "",
      getTImu: "",
      nandu: "",
      tNumber: "",
      testRecordList: {
        questions: [],
        testRecord: {},
      },
      index: 0,
      id: this.$route.query.id,
      testRecord: [],
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
      Letter: [],
      questions: [],
      map: {},
      answer: "",
      userAnswer: "",
    };
  },
  methods: {
    md(content) {
      return marked(content);
    },
    setactivenavbox(namebox) {
      this.isactivenavbox = namebox;
      console.log(this.isactivenavbox);
    },
    change() {},
    routerpushexercise() {
      //跳转道练习主路由
      this.$router.push("/SpecialExercises");
    },
    routerpushexerciseone() {
      this.$router.push("/SpecialExercises");
    },
    //初始化项目
    Init() {
      this.axios
        .post(
          "/test_record/getTestRecordsInfo",
          this.qs.stringify({
            id: this.id,
          }),
          {
            headers: {
              token: window.localStorage.getItem("token"),
            },
          }
        )
        .then((esr) => {
          console.log(esr.data.data);

          this.testRecordList = esr.data.data;
          // this.questions=esr.data.data.questions;
          this.testRecord = this.testRecordList.testRecord;
          this.questions = esr.data.data.questions.map((q) => {
            return {
              ...q,
            };
          });
        });
    },
    ChangeItem(Item, ind) {
      this.index = ind;
      console.log(Item);
      this.map = new Map();
      if (Item.question.name !== "判断题") {
        for (let i = 0; i < Item.question.optionsList.length; i++) {
          console.log(Item.question.optionsList[i].id, "云儿");
          this.map.set(Item.question.optionsList[i].id, this.letter[i]);
        }

        var ans = Item.question.answer.split(",");
        var an = [];
        for (let i = 0; i < ans.length; i++) {
          console.log(ans[i]);
          console.log(this.map.get(parseInt(ans[i])));
          an.push(this.map.get(parseInt(ans[i])));
        }
        this.answer = an.join(",");

        var ans1 = Item.userAnswer.split(",");
        var an1 = [];
        for (let i = 0; i < ans1.length; i++) {
          console.log(ans1[i]);
          console.log(this.map.get(parseInt(ans1[i])));
          an1.push(this.map.get(parseInt(ans1[i])));
        }
        this.userAnswer = an1.join(",");
      }
    },
    active() {
      // var myChart = echarts.init(document.getElementById(''));
      const main = document.getElementById("main");
      console.log(main);
      let myChart = this.$echarts.init(main);
      console.log(myChart);

      var parmas = {
        testRecordId: this.id,
      };
      HttpManager.getTestPaperWrongRecordKnowledge(this.qs.stringify(parmas)).then((e) => {
        console.log(e);

        myChart.setOption({
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colors = [
                      "#73c0de",
                      "#00b8a6",
                      "#ff7070",
                      "#5572c9",
                      "#FF8C00",
                      "#FF0000",
                      "#FE8463",
                    ];
                    return colors[params.dataIndex];
                  },
                },
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: e.data.data,
            },
          ],
        });
      });
    },
  },
  created() {
    this.Init();
    // this.getTestPaperWrongRecordKnowledge();
  },
  mounted() {
    this.active();
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.centerdiv {
  width: 80%;
  margin: 30px auto;
  padding: 1.25rem;
  background-color: #fff;
}

.topbox {
  font-size: 20px;
  display: flex;
  /* border: 1px solid #f4f4f4; */
}

.navboxone,
.navboxtwo {
  width: 100px;
  height: 40px;
  color: #666666;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navboxone:hover,
.navboxtwo:hover {
  cursor: pointer;
}

.activenavbox {
  border-bottom: 2px solid #00b8a6;
  color: #00b8a6;
  font-weight: bold;
}

.centerbox_left {
  /* 中间的box */
  width: 100%;
  /* margin: 30px auto; */
  border-bottom: 1px solid #f4f4f4;
  /* padding: 10px; */
}

.centerbox_right {
  width: 70%;
  margin-left: 10%;
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
  /* overflow: hidden; */
}

.fenxiboxone {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  width: 50%;
}

.minmibox {
  cursor: default;
  width: 550px;
  height: 50px;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  border: #f1f1f1 solid 1px;
  /* background-color: #f6f6f6; */
}

.minmibox span {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666666;
  border-right: 3px solid #fff;
}

.minmibox p {
  margin-left: 10px;
  font-weight: bold;
  color: #333;
}

.fenxiboxtwo {
  /* 知识点专项分析 */
  width: 50%;
  padding: 10px;
  min-width: 500px;
  /* margin: 20px auto; */
}

h2 {
  padding-left: 10px;
  font-weight: normal;
}

.miniboxtwo {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  border: #f1f1f1 solid 1px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.miniboxtwo strong {
  margin-left: 10px;
}

.bottombox {
  /* 最下面的btn */
  display: flex;
  align-items: center;
  justify-content: center;
}

.zailaiyizubtn,
.lainxiqitabtn {
  width: 100px;
  height: 35px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.zailaiyizubtn {
  background-color: #ffffff;
  border: 1px solid #32c6b7;
}

.zailaiyizubtn:hover {
  cursor: pointer;
  color: #0bbbaa;
}

.lainxiqitabtn {
  background-color: #00b8a6;
  color: #fff;
  border: none;
}

.lainxiqitabtn:hover {
  cursor: pointer;
  background-color: #04dac4;
}

.header {
  display: flex;
}

h3 {
  margin: 0;
}

.single {
  min-width: 100vh;
  padding: 2.5rem;

  .header {
    display: flex;
    margin: 0 0 75px 20px;
  }
}

.option {
  display: flex;
  padding-right: 30px;
  margin-top: 30px;
}

.box {
  width: 40px;
  height: 40px;

  border: 1px solid #ffe0c2;
  background: #ffe0c2;
  margin-left: 10px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}

.box2 {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
.box3{
  background: #00b8a6;
  border: 1px solid #00b8a6;
  color: white;
}

.main {
  display: flex;
}

.main > div {
  margin-top: 1.25rem;
}

.aswenr {
  display: flex;
  justify-content: start;
  margin-top: 20px;
}

.shujuku {
  margin-top: -10px;
  display: inline-block;
  width: 300px;
  height: 40px;
  border: 1px solid #01b6a4;
  margin-left: 30px;
  border-radius: 5px;
  color: #bebebe;
  text-align: center;
  line-height: 40px;
}

.jiexi {
  color: #000;
  margin-left: 30px;
}

.shoucang {
  color: #999;
  margin-left: 30px;
}

.panduan {
  font-size: 0.7em;
  display: flex;
  position: relative;
  top: 65px;
  left: -500px;
  line-height: 17px;

  & > div {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #f5f5f5;
    margin-left: 20px;
  }
}

.aa {
  /* font-weight: bold; */
  background: #fff !important;
  border: 1px solid #01b6a4;
}

.question li {
  list-style: none;
  display: block;
  height: 40px;
  display: flex;
  align-items: center;
}

.question span {
  display: inline-block;
  height: 20px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #fdf6ec;
}

.question .yes {
  background: #f0f9eb;
  color: #97d3bf;
}

.question .no {
  background-color: #fdf6ec;
  color: #e7ac95;
}

#main {
  min-width: 600px;
  width: 100%;
  height: 17.5rem;
  margin-left: 2.5rem;
  /* outline: 5px solid  red; */
}
</style>
